<template>
  <div class="w-screen h-screen paper">
    <div class="wrapper p-2">
      <div class="row">
        <ScoreGroup />
      </div>
      <div class="row">
        <MarqueePanel ref="marquee" />
      </div>
      <div class="row">
        <HistoryColor />
      </div>
      <div class="row">
        <SettingGroup 
          :colorScore="colorScore"
          :pointScore="pointScore" 
          @setColor="setColor"
          @setScore="setScore"
          @toLeft="toLeft"
          @toRight="toRight"
          @setSingle="setSingle"
          @setDouble="setDouble"
          @setSmall="setSmall"
          @setLarge="setLarge"
          @onStart="onStart" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue' 
  import ScoreGroup from '@/components/ScoreGroup.vue'
  import MarqueePanel from '@/components/MarqueePanel.vue'
  import SettingGroup from '@/components/SettingGroup.vue'
  import HistoryColor from '@/components/HistoryColor.vue'
  import useStore from '@/composables/useStore'
  const { score, game, color } = useStore()
  import { getGameColor } from '@/utils/game'

  const marquee = ref(null)

  const setSingle = (params) => {
    if (score.checked.k2) return
    console.log('单', params)
  }

  const setDouble = (params) => {
    if (score.checked.k2) return
    console.log('双', params)
  }

  const setSmall = (params) => {
    if (score.checked.k2) return
    console.log('小', params)
  }

  const setLarge = (params) => {
    if (score.checked.k2) return
    console.log('大', params)
  }

  const setColor = ({ value }) => {
    score.setColor(value)
  }

  const setScore = ({ value }) => {
    score.setScore(value)
  }

  const toLeft = () => { 
    score.toLeft()
  }

  const toRight = () => {
    score.toRight()
  }

  onMounted(() => {
    marquee.value.init()
  })

  const onStart = () => {
    game.running = true
    color.current = getGameColor()
    marquee.value.start()
  }

</script>